import { defineComponent } from 'vue';

import './index.scss';

interface ILightProps {
  color?: string;
}

export const MciLight = defineComponent({
  // eslint-disable-next-line vue/require-prop-types
  props: ['color'],
  setup: (props: ILightProps) => {
    const colorMap: Record<string, string> = {
      success: '#00AC97',
      error: '#F53F3F',
      warn: '#F29727'
    };
    const bg = computed(() => {
      const mapColor = props.color && colorMap[props.color];
      return mapColor || props.color;
    });
    return () => (bg.value ? <span class="mci-light" style={{ background: bg.value }} /> : null);
  }
});
